<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	<title>NginxConfigSet</title>
	
	<link rel="stylesheet" href="../bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/nginxconfigset.css">
 	<script type="text/javascript" src="../jquery/3.4.1/jquery.slim.js"></script>
 	<script src="../bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar">

	<div class="container-fluid">
		<div class="modal fade" id="pagetip" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
		   <div class="modal-dialog">
		      <div class="modal-content">
		      
		         <div class="modal-header text-left">
		            <h3 class="modal-title" id="myModalLabel">文件上传 </h3>
		            <button type="button" class="close bg-light" data-dismiss="modal" aria-hidden="true">&times;</button>
		         </div>
		         
		         <div class="modal-body">未选择文件</div>
		         
		         <div class="modal-footer">
		            <button type="button" class="btn btn-primary" data-dismiss="modal">关闭 </button>
		         </div>
		         
		      </div>
		    </div>
		</div>

		<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top" style="max-height: 120px;">
			<ul class="navbar-nav">
				<li class="col-*-*">
				    <h3 class="card-title ml-5">Nginx配置文件生成</h3>
				</li>
				<li class="col-*-*">&nbsp;&nbsp;&nbsp;&nbsp;</li>
				
				<li class="col-*-*">
				    <a href="#section1" class="text-info">
						<button type="button" class="btn btn-outline-primary ml-3">导入设置</button>
				    </a>
				</li>
				<li class="col-*-*">
				    <a href="#section2" class="text-info">
						<button type="button" class="btn btn-outline-primary ml-3">本机IP设置</button>
				    </a>
				</li>
				<li class="col-*-*">
				    <a href="#section3" class="text-info">
						<button type="button" class="btn btn-outline-primary ml-3">其他IP设置</button>
				    </a>
				</li>
				<li class="col-*-*">
				    <a href="#section4" class="text-info">
				        <button type="button" class="btn btn-outline-primary ml-3">服务设置</button>
				    </a>
				</li>
				<li class="col-*-*">
				    <a href="#section5" class="text-info">
				        <button type="button" class="btn btn-outline-primary ml-3">导出参数设置</button>
				    </a>
				</li>
			</ul>
		</nav>

		<div id="section1" class="container-fluid text-info" style="padding-top: 70px; padding-bottom: 200px">
			<script type="module" src="js/nginxsetimport.js"></script>
			
			<div class="card">
			    <div class="card-header">上传文件</div>
			    <div class="card-body">
					<form id="importfile">
						<div class="input-group input-group-sm col-md-6">
						    <div class="custom-file">
							     <input type="file" class="custom-file-input" id="customFile" name="file"/> 
							     <label class="custom-file-label" for="customFile">选择文件(JSON格式的文件)</label>
						    </div>
		                </div>
					      
					    <div class="input-group input-group-sm col-md-6">
				           <label class="radio-inline" style="">
				               <input type="radio" class="radio_ofMe" value="true" checked="checked" disabled="disabled">
							   <span>属于本机</span> 
				           </label>
				           <label class="radio-inline">
				               <input type="radio" class="radio_ofMe" value="false" disabled="disabled">
    					       <span>不属于本机</span>
				           </label>
					    </div>
					    
						<div class="input-group input-group-sm col-md-6">
						  <button type="button" name="submit" class="btn btn-primary">提交</button>
					    </div>
					</form>
                </div> 
            </div>
			
		</div>
		
		<div id="section2" class="container-fluid rounded text-primary" style="padding-top: 70px; padding-bottom: 200px">
		    <script type="module" src="js/ipself.js"></script>
		      
		    <div class="panel panel-default">
			    <div class="panel-heading">
			        <h3 class="panel-title">本机IP(IPv4)列表</h3>
			    </div>
			    
			    <div class="panel-body" id="myself">
			        <div class="btn-group pl-5 mb-3">
				  		<div class="col-*-3 btn btn-success rounded">查询</div>
				  		<span class="col-*-3">&nbsp;&nbsp;&nbsp;&nbsp;</span>
				  		<div class="col-*-3 btn btn-success rounded">新增</div>
			        </div>
			        
			        <div>
				        <table class="table table-striped table-bordered table-hover">
				             <thead>
				                 <tr class="row">
				                     <td class="col d-none">ID</td>
				                     <td class="col text-center">IP</td>
				                     <!-- 15个字符 -->
				                     <td class="col text-center">操作</td>
				                     <!-- 2个字符 -->
				                 </tr>
				             </thead>
				             <tbody></tbody>
				          </table>
			          </div>
			    </div>
			</div>
		      
		      
		</div>
		
		<div id="section3" class="container-fluid text-dark" style="padding-top: 70px; padding-bottom: 200px">
	        <script type="module" src="js/ipother.js"></script>
			
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">其他IP(IPv4)列表</h3>
				</div>
				
				<div class="panel-body" id="computer">
                    <div class="btn-group pl-5 mb-3">
                        <div class="col-*-3 btn btn-success rounded">查询</div>
                        <span class="col-*-3">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <div class="col-*-3 btn btn-success rounded">新增</div>
                    </div>
					   
					<div>
			          <table class="table table-bordered table-hover">
			                <thead>
			                    <tr class="row">
			                        <td class="col d-none">ID</td>
			                        <td class="col text-center">主机</td>
			                        <!-- 6个字符 -->
			                        <td class="col text-center">标签</td>
			                        <!-- 8个字符 -->
			                        <td class="col text-center">IP</td>
			                        <!-- 15个字符 -->
			                        <td class="col text-center">操作</td>
			                        <!-- 2个字符 -->
			                    </tr>
			                </thead>
			                <tbody></tbody>
			            </table>
					</div>
				</div>
			</div>  
		  
		</div>
		
		<div id="section4" class="container-fluid rounded text-dark" style="padding-top: 70px; padding-bottom: 200px">
		    <script type="module" src="js/nginxserver.js"></script>         
			
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">服务列表</h3>
					<p class="lead"><mark>端口号必须先解除占用才可以再次使用</mark></p>
					<p class="lead"><mark>不建议使用0-1024范围内的端口号</mark></p>
					<div class="btn-group" id="section4-nav">
					  <button type="button" data-toggle="button" class="btn btn-info">BS服务</button>
					  <button type="button" data-toggle="button" class="btn btn-info">CS服务</button>
					</div>
				</div>
				
				<div class="panel-body">
				
					<div id="section4content0" class="mt-3">
					   
					    <label class="mt-3 mb-3">
						   <span class="col-*-3 btn btn-success rounded">查询</span>
						   <span class="col-*-3 btn btn-success rounded">新增</span>
					    </label>
			            
		                <table class="table table-striped table-bordered table-hover table-sm">
			                <thead>
			                    <tr>
			                        <th class="d-none">ID</th>
                                    <th class="text-center">服务名称</th>
                                    <th class="text-center" style="width: 160px">监听IP</th>
                                    <th class="text-center" style="width: 100px">监听端口</th>
                                    <th class="text-center" style="width: 160px">前端IP</th>
                                    <th class="text-center" style="width: 100px">前端端口</th>
                                    <th class="text-center" style="width: 160px">后端IP</th>
                                    <th class="text-center" style="width: 100px">后端端口</th>
                                    <th class="text-center" style="width: 10px">xlxs</th>
                                    <th class="text-center" style="width: 120px">操作</th>
                                    <th class="d-none"></th>
			                    </tr>
			                </thead>
			                <tbody></tbody>
		                </table>
					</div>
					
					<div id="section4content1" class="mt-3">
<!-- 					<script type="module" src="js/nginxserverCS.js"></script> -->
					
                        <label class="mt-3 mb-3">
                           <span class="col-*-3 btn btn-success rounded">查询</span>
                           <span class="col-*-3 btn btn-success rounded">新增</span>
                        </label>
        <!--    div class="container-fluid"> -->
			                <table class="table table-striped table-bordered table-hover table-sm">
			                    <thead>
				                    <tr>
	                                       <th class="d-none">ID</th>
	                                       <th class="text-center">服务名称</th>
	                                       <th class="text-center" style="width: 160px">监听IP</th>
	                                       <th class="text-center" style="width: 100px">监听端口</th>
	                                       <th class="text-center" style="width: 160px">前端IP</th>
	                                       <th class="text-center" style="width: 100px">前端端口</th>
	                                       <th class="text-center" style="width: 160px">后端IP</th>
	                                       <th class="text-center" style="width: 100px">后端端口</th>
	                                       <th class="text-center" style="width: 10px">xlxs</th>
	                                       <th class="text-center" style="width: 120px">操作</th>
	                                       <th class="d-none"></th>
	                                </tr>
			                    </thead>
			                    <tbody></tbody>
			                </table>
<!--                         </div> -->
					</div>
					
				</div>
			</div>	
	    </div>

		<div id="section5" class="container-fluid bg-light border border-secondary" style="padding-top: 70px; padding-bottom: 250px">
		<script type="module" src="js/nginxsetexport.js"></script>
		  <div class="panel panel-success">
			    <div class="panel-heading">
			        <h3 class="panel-title">下载文件</h3>
			    </div>
				<div class="panel-body btn-group-vertical">
				  <button type="button" class="btn btn-light border rounded m-2">备份配置参数文件（JSON格式的json文件）</button>
				  <button type="button" class="btn btn-light border rounded m-2">备份配置参数文件（表格格式的txt文件）</button>
				  <button type="button" class="btn btn-light border rounded m-2">下载NGINX原配置文件<span class="badge badge-primary">conf</span></button>
				  <button type="button" class="btn btn-success border rounded m-2">下载BS服务的NGINX配置文件</button>
				  <button type="button" class="btn btn-success border rounded m-2">下载CS服务的NGINX配置文件</button>
				</div>
			</div>
		</div>
		
	</div>
</body>

</html>
